<template>
  <div class="wrap">
    <div class="top">
      <img 
        src="../static/img/aaa.png" 
        alt="">
    </div>
    <div class="intro text-center">
      <p class="font-16 desc">{{ $t('loanMoney.loanAmount') }}</p>
      <p class="blue bold font-24 content">{{ trueAmount || trueAmountDefault }} VND</p>
      <p class="font-16 desc">{{ $t('loanMoney.payDate') }}</p>
      <p class="blue bold font-24 content">{{ transformData }}</p>
      <p class="font-16 desc">{{ $t('loanMoney.payAmount') }}</p>
      <p class="blue bold font-24 content">{{ payAmount || payAmountDefault }} VND</p>
    </div>
  </div>
</template>
<script>
export default {
  // data() {},
  props: {
    trueAmount: {
      type: [String],
      default: ''
    },
    payDate: {
      type: [String],
      default: ''
    },
    payAmount: {
      type: [String],
      default: ''
    }
  },
  computed: {
    trueAmountDefault() {
      return this.$store.state.trueAmount
    },
    payDateDefault() {
      return this.$store.state.payDate
    },
    payAmountDefault() {
      return this.$store.state.payAmount
    },
    transformData() {
      const date = new Date(this.payDate || this.payDateDefault)
      return this.transform(date)
    }
  },
  methods: {
    format: function(val) {
      val = Number(val)
      return val < 10 ? '0' + val : val
    },
    transform: function(date) {
      let o = {
        yyyy: date.getFullYear(),
        m: this.format(date.getMonth() + 1),
        dd: this.format(date.getDate()),
        hh: this.format(date.getHours()),
        mm: this.format(date.getMinutes()),
        ss: this.format(date.getSeconds()),
        S: date.getMilliseconds()
      }
      return `${o.yyyy}-${o.m}-${o.dd}`
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  height: 441px;
  .top {
    img {
      width: 100%;
      height: 146px;
    }
  }
  .intro {
    padding: 10px;
    p {
      line-height: 38px;
    }
  }
}
</style>
